<template>
	<PageWrapper dense contentFullHeight contentClass="flex">
		<BasicTable @register="registerTable">
			<template #toolbar>
				<a-button type="primary" @click="handleCreate">新增用户</a-button>
			</template>
			<template #bodyCell="{column,  record }">
				<template v-if="column.key === 'action'">
					<TableAction :actions="[
						{
							icon: 'clarity:lock-line',
							tooltip: '修改密码',
							onClick: handleSetPassword.bind(null, record),
							auth: 'sys:user:edit'
						},
						{
							icon: 'clarity:note-edit-line',
							tooltip: '编辑用户资料',
							onClick: handleEdit.bind(null, record),
							auth: 'sys:user:edit'
						},
						{
							icon: 'ant-design:delete-outlined',
							color: 'error',
							tooltip: '删除此账号',
							popConfirm: {
								title: '是否确认删除',
								confirm: handleDelete.bind(null, record)
							}
						}
					]" />
				</template>
			</template>
		</BasicTable>
		<UserModal @register="registerModal" @success="handleSuccess" />
		<PasswordModal @register="registerPasswordModal" @success="handlePasswordSuccess" />
	</PageWrapper>
</template>
<script lang="ts">
	import { defineComponent, reactive } from 'vue';
	import { BasicTable, useTable, TableAction } from '/@/components/Table';
	import { del, list } from '/@/api/system/user';
	import { PageWrapper } from '/@/components/Page';
	import { useModal } from '/@/components/Modal';
	import UserModal from './UserModal.vue';
	import PasswordModal from './PasswordModal.vue';
	import { columns, searchFormSchema } from './user.data';
	import { useGo } from '/@/hooks/web/usePage';
	import { useMessage } from '/@/hooks/web/useMessage';
	const { createMessage } = useMessage();

	export default defineComponent({
		name: 'UserManagement',
		components: { BasicTable, PageWrapper, UserModal, TableAction, PasswordModal },
		setup() {
			const go = useGo();
			const [registerModal, { openModal }] = useModal();
			const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();
			const [registerTable, { reload }] = useTable({
				title: '用户列表',
				api: list,
				rowKey: 'id',
				columns,
				formConfig: {
					labelWidth: 60,
					showResetButton:false,
					schemas: searchFormSchema,
					autoSubmitOnEnter: true
				},
				useSearchForm: true,
				showTableSetting: true,
				bordered: true,
				handleSearchInfoFn(info) {
					return info;
				},
				actionColumn: {
					width: 80,
					title: '操作',
					dataIndex: 'action',
					fixed: undefined,
				},
			});

			function handleCreate() {
				openModal(true, {
					isUpdate: false
				});
			}

			function handleEdit(record : Recordable) {
				openModal(true, {
					record,
					isUpdate: true
				});
			}

			async function handleDelete(record : Recordable) {
				await del({ ids: record.id });
				createMessage.success('删除成功!');
				handleSuccess();
			}

			function handleSuccess() {
				reload();
			}

			function handleSetPassword(record : Recordable) {
				openPasswordModal(true, {
					record,
					isUpdate: true
				});
			}

			function handlePasswordSuccess() {
				reload();
			}

			return {
				registerTable,
				registerModal,
				handleCreate,
				handleEdit,
				handleDelete,
				handleSuccess,
				handleSetPassword,
				registerPasswordModal,
				handlePasswordSuccess
			};
		}
	});
</script>